package com.example.composemodifiterdemo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.*
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

/**
 * @auth: njb
 * @date: 2023/1/3 22:31
 * @desc:
 */
class DrawableActivity:ComponentActivity() {
    val Purple = Color(0xFF7E57C2)
    val Yellow = Color(0xFFFFCA28)
    val Red = Color(0xFFEF5350)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            //drawRoundRect()
            //drawWithCache()
            //scaleXY()
            //translationXy()
            transformOrigin()
            //graphicsLayer()
        }
    }

    @Composable
    fun drawWithContent(){
        var pointerOffset by remember {
            mutableStateOf(Offset(0f, 0f))
        }
        Column(
            modifier = Modifier
                .fillMaxSize()
                .pointerInput("dragging") {
                    detectDragGestures { change, dragAmount ->
                        pointerOffset += dragAmount
                    }
                }
                .onSizeChanged {
                    pointerOffset = Offset(it.width / 2f, it.height / 2f)
                }
                .drawWithContent {
                    drawContent()
                    // draws a fully black area with a small keyhole at pointerOffset that’ll show part of the UI.
                    drawRect(
                        Brush.radialGradient(
                            listOf(Color.Transparent, Color.Black),
                            center = pointerOffset,
                            radius = 100.dp.toPx(),
                        )
                    )
                }
        ) {
            // Your composables here
        }
    }

    @Composable
    fun drawRoundRect(){
        Text(
            "Hello Compose!",
            modifier = Modifier
                .drawBehind {
                    drawRoundRect(
                        Color(0xFFBBAAEE),
                        cornerRadius = CornerRadius(10.dp.toPx())
                    )
                }
                .padding(10.dp)
                .height(100.dp),
                textAlign = TextAlign.Center
        )
    }

    @Composable
    fun drawWithCache(){
        Text(
            "Hello Compose!",
            modifier = Modifier
                .drawWithCache {
                    val brush = Brush.linearGradient(
                        listOf(
                            Color(0xFF9E82F0),
                            Color(0xFF42A5F5)
                        )
                    )
                    onDrawBehind {
                        drawRoundRect(
                            brush,
                            cornerRadius = CornerRadius(10.dp.toPx())
                        )
                    }
                }
                .height(100.dp),
            textAlign = TextAlign.Center
        )
    }

    @Composable
    fun scaleXY(){
        Image(
            painter = painterResource(id = R.mipmap.avatar),
            contentDescription = "Sunset",
            modifier = Modifier
                .graphicsLayer {
                    this.scaleX = 1.2f
                    this.scaleY = 0.8f
                }
        )
    }

    @Composable
    fun translationXy(){
        Image(
            painter = painterResource(id = R.mipmap.avatar),
            contentDescription = "Sunset",
            modifier = Modifier
                .graphicsLayer {
                    this.translationX = 100.dp.toPx()
                    this.translationY = 10.dp.toPx()
                }
        )
    }

    @Composable
    fun rotationXYZ(){
        Image(
            painter = painterResource(id = R.mipmap.avatar),
            contentDescription = "Sunset",
            modifier = Modifier
                .graphicsLayer {
                    this.rotationX = 90f
                    this.rotationY = 275f
                    this.rotationZ = 180f
                }
        )
    }

    @Composable
    fun transformOrigin(){
        Image(
            painter = painterResource(id = R.mipmap.avatar),
            contentDescription = "Sunset",
            modifier = Modifier
                .graphicsLayer {
                    this.transformOrigin = TransformOrigin(0f, 0f)
                    this.rotationX = 90f
                    this.rotationY = 275f
                    this.rotationZ = 180f
                }
        )
    }

    @Composable
    fun graphicsLayer(){
        Column(modifier = Modifier.padding(16.dp)) {
            Box(
                modifier = Modifier
                    .size(200.dp)
                    .graphicsLayer {
                        clip = true
                        shape = CircleShape
                    }
                    .background(Color(0xFFF06292))
            ) {
                Text(
                    "Hello Compose",
                    style = TextStyle(color = Color.Black, fontSize = 46.sp),
                    modifier = Modifier.align(Alignment.Center)
                )
            }
            Box(
                modifier = Modifier
                    .size(200.dp)
                    .clip(CircleShape)
                    .background(Color(0xFF4DB6AC))
            )
        }
    }

    @Composable
    fun modifierClip(){
        Column(modifier = Modifier.padding(16.dp)) {
            Box(
                modifier = Modifier
                    .clip(RectangleShape)
                    .size(200.dp)
                    .border(2.dp, Color.Black)
                    .graphicsLayer {
                        clip = true
                        shape = CircleShape
                        translationY = 50.dp.toPx()
                    }
                    .background(Color(0xFFF06292))
            ) {
                Text(
                    "Hello Compose",
                    style = TextStyle(color = Color.Black, fontSize = 46.sp),
                    modifier = Modifier.align(Alignment.Center)
                )
            }

            Box(
                modifier = Modifier
                    .size(200.dp)
                    .clip(RoundedCornerShape(500.dp))
                    .background(Color(0xFF4DB6AC))
            )
        }
    }

    @Composable
    fun alpha(){
        Image(
            painter = painterResource(id = R.mipmap.avatar),
            contentDescription = "clock",
            modifier = Modifier
                .graphicsLayer {
                    this.alpha = 0.5f
                }
        )
    }

/*    @Composable
    fun drawCircle(){
        Image(painter = painterResource(id = R.mipmap.avatar),
            contentDescription = "Dog",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .size(120.dp)
                .aspectRatio(1f)
                .background(
                    Brush.linearGradient(
                        listOf(
                            Color(0xFFC5E1A5),
                            Color(0xFF80DEEA)
                        )
                    )
                )
                .padding(8.dp)
                .graphicsLayer {
                    compositingStrategy = CompositingStrategy.Offscreen
                }
                .drawWithCache {
                    val path = Path()
                    path.addOval(
                        Rect(
                            topLeft = Offset.Zero,
                            bottomRight = Offset(size.width, size.height)
                        )
                    )
                    onDrawWithContent {
                        clipPath(path) {
                            // this draws the actual image - if you don't call drawContent, it wont
                            // render anything
                            this@onDrawWithContent.drawContent()
                        }
                        val dotSize = size.width / 8f
                        // Clip a white border for the content
                        drawCircle(
                            Color.Black,
                            radius = dotSize,
                            center = Offset(
                                x = size.width - dotSize,
                                y = size.height - dotSize
                            ),
                            blendMode = BlendMode.Clear
                        )
                        // draw the red circle indication
                        drawCircle(
                            Color(0xFFEF5350), radius = dotSize * 0.8f,
                            center = Offset(
                                x = size.width - dotSize,
                                y = size.height - dotSize
                            )
                        )
                    }

                }
        )
    }

    @Composable
    fun CompositingStrategyExamples() {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .wrapContentSize(Alignment.Center)
        ) {
            Canvas(
                modifier = Modifier
                    .graphicsLayer()
                    .size(100.dp) // Note size of 100 dp here
                    .border(2.dp, color = Color.Blue)
            ) {
                // ... and drawing a size of 200 dp here outside the bounds
                drawRect(color = Color.Magenta, size = Size(200.dp.toPx(), 200.dp.toPx()))
            }

            Spacer(modifier = Modifier.size(300.dp))

            Canvas(
                modifier = Modifier
                    // force to an offscreen buffer
                    .graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen)
                    .size(100.dp) // Note size of 100 dp here
                    .border(2.dp, color = Color.Blue)
            ) {
                drawRect(color = Color.Red, size = Size(200.dp.toPx(), 200.dp.toPx()))
            }
        }
    }

    @Preview
    @Composable
    fun CompositingStratgey_ModulateAlpha() {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(32.dp)
        ) {
            // Base drawing, no alpha applied
            Canvas(
                modifier = Modifier.size(200.dp)
            ) {
                drawSquares()
            }

            Spacer(modifier = Modifier.size(36.dp))

            // Alpha 0.5f applied to whole composable
            Canvas(modifier = Modifier
                .size(200.dp)
                .graphicsLayer {
                    alpha = 0.5f
                }) {
                drawSquares()
            }
            Spacer(modifier = Modifier.size(36.dp))

            // 0.75f alpha applied to each draw call when using ModulateAlpha
            Canvas(modifier = Modifier
                .size(200.dp)
                .graphicsLayer {
                    compositingStrategy = CompositingStrategy.ModulateAlpha
                    alpha = 0.75f
                }) {
                drawSquares()
            }
        }
    }*/

    private fun DrawScope.drawSquares() {

        val size = Size(100.dp.toPx(), 100.dp.toPx())
        drawRect(color = Red, size = size)
        drawRect(
            color = Purple, size = size,
            topLeft = Offset(size.width / 4f, size.height / 4f)
        )
        drawRect(
            color = Yellow, size = size,
            topLeft = Offset(size.width / 4f * 2f, size.height / 4f * 2f)
        )
    }



}